<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.POPOVER.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol directive"></span></h3>

      <div class="free-demo-row">
        <h3 class="free-title">free-popover</h3>
        <p>{{'DEMO.POPOVER.DESCRIPTION' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>popoverPosition</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.POPOVER.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>dimiss</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.POPOVER.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-demo-board">
        <div class="free-card-board">
          <h3 class="free-toolbar">Import</h3>
          <free-tab-group direction="right" theme="line">
            <free-tab header="CODE">
              <free-code lang="typescript">
                import &#123;PopoverModule&#125; from 'freeng/freeng';
              </free-code>
            </free-tab>
          </free-tab-group>
        </div>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Position</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="popover.toggle($event)">Top</button>
            <button fButton (click)="rightPopover.toggle($event)">Right</button>
            <button fButton (click)="bottomPopover.toggle($event)">Bottom</button>
            <button fButton (click)="leftPopover.toggle($event)">Left</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;button fButton (click)="popover.toggle($event)"&gt;Top&lt;/button&gt;
              &lt;button fButton (click)="rightPopover.toggle($event)"&gt;Right&lt;/button&gt;
              &lt;button fButton (click)="bottomPopover.toggle($event)"&gt;Bottom&lt;/button&gt;
              &lt;button fButton (click)="leftPopover.toggle($event)"&gt;Left&lt;/button&gt;
              &lt;free-popover #popover&gt;
                &lt;img src="assets/images/f1.jpg" alt=""&gt;
              &lt;/free-popover&gt;
              &lt;free-popover #rightPopover [popoverPosition]="'right'"&gt;
                &lt;free-accordion-group&gt;
                  &lt;free-accordion header="Item 1"&gt;
                    Item 1 content.
                  &lt;/free-accordion&gt;
                  &lt;free-accordion header="Item 2"&gt;
                    Item 2 content.
                  &lt;/free-accordion&gt;
                  &lt;free-accordion header="Item 3"&gt;
                    Item 3 content.
                  &lt;/free-accordion&gt;
                &lt;/free-accordion-group&gt;
              &lt;/free-popover&gt;
              &lt;free-popover #leftPopover [popoverPosition]="'left'"&gt;
                &lt;img src="assets/images/f1.jpg" alt=""&gt;
              &lt;/free-popover&gt;
              &lt;free-popover #bottomPopover [popoverPosition]="'bottom'"&gt;
                &lt;img src="assets/images/f1.jpg" alt=""&gt;
              &lt;/free-popover&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Mouse</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton
                    (mouseenter)="mousePopover.show($event)" (mouseleave)="mousePopover.hide()">mouseIn</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;button fButton
                      (mouseenter)="mousePopover.show($event)" (mouseleave)="mousePopover.hide()"&gt;mouseIn&lt;/button&gt;
              &lt;free-popover #mousePopover&gt;
                &lt;img src="assets/images/f1.jpg" alt=""&gt;
              &lt;/free-popover&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>

<free-popover #popover>
  <img src="assets/images/f1.jpg" alt="">
</free-popover>
<free-popover #rightPopover [popoverPosition]="'right'">
  <free-accordion-group>
    <free-accordion header="Item 1">
      Item 1 content.
    </free-accordion>
    <free-accordion header="Item 2">
      Item 2 content.
    </free-accordion>
    <free-accordion header="Item 3">
      Item 3 content.
    </free-accordion>
  </free-accordion-group>
</free-popover>
<free-popover #leftPopover [popoverPosition]="'left'">
  <img src="assets/images/f1.jpg" alt="">
</free-popover>
<free-popover #bottomPopover [popoverPosition]="'bottom'">
  <img src="assets/images/f1.jpg" alt="">
</free-popover>

<free-popover #mousePopover>
  <img src="assets/images/f1.jpg" alt="">
</free-popover>
